<template>
  <div>
    <ol class="breadcrumb">
      <li><a href="#">首页</a></li>
      <li><a href="#">数据列表</a></li>
      <li class="active" v-show="state === 0">新增</li>
      <li class="active" v-show="state === 1">修改</li>
    </ol>
    <div class="panel panel-default">
      <div class="panel-heading">表单数据<div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-question-sign"></i></div></div>
      <div class="panel-body">
        <form role="form" ref="userform">
          <div class="form-group">
            <label for="exampleInputPassword1">登陆账号</label>
            <input type="text" class="form-control" id="loginacct" v-model="user.loginacct" placeholder="请输入登陆账号">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">用户名称</label>
            <input type="text" class="form-control" id="username" v-model="user.username" placeholder="请输入用户名称">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">邮箱地址</label>
            <input type="email" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱地址">
            <p class="help-block label label-warning">请输入合法的邮箱地址, 格式为： xxxx@xxxx.com</p>
          </div>
          <button type="button"  @click="selectMethod(state)" class="btn btn-success">
            <i v-show="state === 0" class="glyphicon glyphicon-plus">新增</i>
            <i v-show="state === 1" class="glyphicon glyphicon-edit">修改</i>
          </button>
          <button type="button" @click="reset" class="btn btn-danger"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      state: '', // 0新增 1修改
      user: {
        loginacct: '',
        username: '',
        email: '',
        id: parseInt(this.$route.params.id) // 用户id this.$route.params.id
      }
    }
  },
  methods: {
    selectMethod (state) {
      if (state === 0) {
        this.save()
      }
      if (state === 1) {
        this.update()
      }
    },
    save () {
      if (this.user.loginacct === '' || this.user.username === '' || this.user.email === '') {
        return
      }
      let jsondata = this.$qs.stringify(this.user) // 这样操作是可以的
      console.log(jsondata)
      axios.post('/api/user/doAdd', jsondata).then((response) => {
        const res = response.data.data // 真实数据
        console.log(res)
        this.$router.push('/layout/bottom/center/user/index')
      }).catch(function (error) {
        console.log(error)
      })
    },
    update () {
      console.log('update')
      let jsondata = this.$qs.stringify(this.user)
      // 判断是否修改
      axios.post('/api/user/doedit', jsondata).then((response) => {
        const success = response.data.success
        if (success) {
          this.$router.push('/layout/bottom/center/user/index')
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    reset () {
      console.log(1122)
      if (this.state === 0) {
        this.$refs['userform'].resetFields()
      }
    }
  },
  mounted () {
    if (this.user.id === 0) {
      this.state = 0
    } else {
      this.state = 1
      // 查询数据
      let jsondata = this.$qs.stringify({
        id: this.user.id
      })
      axios.post('/api/user/toedit', jsondata).then((response) => {
        const userInfo = response.data.data // 为一个用户信息对象
        console.log(userInfo)
        this.user.id = userInfo.id
        this.user.username = userInfo.username
        this.user.loginacct = userInfo.loginacct
        this.user.email = userInfo.email
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
}
</script>
<style></style>
